<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta http-equiv="cache-control" content="no-cache"> 
		<title>证照库选择</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			body{background: #fff;overflow: auto;}
			.mui-bar {width: 100%;}
			.mui-icon-closeempty{font-size: 0.7rem !important;color: #fff;}
			.mui-bar-nav .mui-icon {margin: 0.1rem 0 0 .1rem !important;}
			.mui-bar-nav .submit{color:#fff;margin: 0.25rem 0.3rem 0 0 !important;font-size: 0.28rem;}
			.mui-title .title_box{width: 3.96rem;height: 0.6rem;margin: 0 auto;margin-top: 0.15rem;border: 1px solid #fff;border-radius: 0.1rem;}
			.mui-title .title_box .title:first-child{border-top-left-radius:0.1rem ;border-bottom-left-radius: 0.1rem;}
			.mui-title .title_box .title:last-child{border-top-right-radius:0.1rem ;border-bottom-right-radius: 0.1rem;}
			.mui-title .title_box .title{width: 50%;height: 100%;float: left;line-height: 0.6rem;}
			.mui-title .title_box .title_active{background: #fff;color: #104ffc;}
			.mui-table-view:before,.mui-table-view:after{height: 0;}
			.mui-content{width: 7.5rem;height: 100%;background: #fff;padding-top: 0 !important;}	
			/*无内容*/
			.mui-content .info{width: 100%;height: 0.63rem;background: #eeeeee;font-size: 0.28rem;color: #666666;padding-left:0.28rem;line-height: 0.63rem;}
			.mui-content .wenj{width: 100%;height: 1.84rem;background: url(../../../images/work/wenj.png) no-repeat top center; background-size: contain;text-align: center;line-height: 4.6rem;color:#bebebe;font-size: 0.3rem;margin-top: 2.54rem;}
			/*证照库*/
			/*.mui-content .imgs ul,.mui-content .doc ul{margin-top: 0.9rem;}*/
			.mui-content .imgs ul .mui-table-view-cell:after,.mui-content .doc ul .mui-table-view-cell:after{height: 0.14rem;background: #eeeeee;left: 0;}
			.mui-content .imgs ul li,.mui-content .doc ul li{width: 100%;height: 1.66rem;background: #fff url(../../../images/menu/ok1.png) no-repeat center right;background-size: 0.4rem;background-position-x: 6.8rem;}
			.mui-content .imgs ul li:last-child;.mui-content .doc ul li:last-child{margin-bottom: 1.16rem;}
			.mui-content .imgs ul .li_active,.mui-content .doc ul .li_active{background: #fff url(../../../images/menu/ok.png) no-repeat center right;background-size: 0.4rem;background-position-x: 6.8rem;}
			.mui-content .imgs ul .mui-table-view-cell,.mui-content .doc ul .mui-table-view-cell{padding: 0.42rem 0.28rem 0.42rem 0.28rem;}
			.mui-table-view-cell img{width: 0.83rem;}
			.mui-table-view-cell .name{font-size: 0.3rem;position:absolute;top: 0.44rem;left: 1.27rem;}
			.mui-table-view-cell .time{font-size: 0.28rem;color: #b0b0b0;position:absolute;top: 0.89rem;left: 1.45rem;}

			/*蒙版*/
			
		 	.del_box{display: none;width: 100%;height: 4.1rem;position: absolute;bottom:0.94rem;background: #fff;z-index: 999;}
			.del_box .title{width: 100%;height: 0.81rem;background: #eeeeee;line-height: 0.81rem;font-size: 0.3rem;padding: 0 0.32rem;}
			.del_box .title span:first-child{float: left;color: #fe6401;}
			.del_box .title span:last-child{float: right;color: #a5a5a5;}
			.del_box .mui-table-view{overflow: auto;}
			.del_box .mui-table-view .mui-table-view-cell{height: 0.77rem;width: 100%;font-size: 0.28rem;}
			.del_box .mui-table-view .mui-table-view-cell:after{height: 1;left: 0;}
			.del_box .mui-table-view .mui-table-view-cell span:first-child{float: left;}
			.del_box .mui-table-view .mui-table-view-cell span:last-child{float: right;background: url(../../../images/work/dels.png) no-repeat center center;background-size: contain;width: 0.33rem;height: 0.33rem;display: inline-block;}
			/*确认按钮*/
			.mui-content .sure{width: 100%;height: 1.16rem;position: fixed;bottom: 0;background: url(../../../images/work/sure_bg.png) no-repeat center center;background-size: 100%;padding-left: 1.5rem;padding-top: 0.5rem;z-index: 999;}
			.mui-content .sure .info_num{font-size: 0.28rem;}	
			.sure .sure-btn{position: absolute;right: 0;bottom: 0;height: 0.96rem;width: 2.5rem;font-size: 0.28rem;color: #fff;border: none;background: url(../../../images/work/sure_btn.png) no-repeat center center;background-size: contain;}
			.mui-table-view-cell.mui-active{background-color: #fff;}
			
			.mui-table-view{padding-bottom: .9rem;}
		</style>
	</head>
	<body>
		<div class="mui-bar mui-bar-nav" id="header">
			<a class="mui-icon mui-icon-closeempty  mui-pull-left mui-action-back"></a>
			<h1 class="mui-title">
				<div class="title_box">
					<div class="title titles title_active">证照库</div>
					<div class="title titles">自制材料</div>
				</div>
			</h1>
			<!--<a class="submit mui-pull-right">提交</a>-->
		</div>
		<div class="mui-content" id="content">
			<!--证照库-->
			<div class="imgs">
				<div class="info">共<span v-text="eleclicenList.length"></span>个文件</div>
				<!--如果没有内容-->
				<div  class="wenj" v-if="noEleclicen">证照库没有内容</div>
				<ul class="mui-table-view" v-else >
					<template v-for="eleclicen in eleclicenList"><!-- 证照库用的licenseNumber -->
						<li v-on:click="chooThis($event,1,eleclicen.licenseNumber,eleclicen.licenseName)" :licenseNumber="eleclicen.licenseNumber" :eleclicenId="eleclicen.oid"  class="mui-table-view-cell">
					    	<img v-bind:src=" host + eleclicen.attaImgPath +'&random=' +Math.random()" />
					    	<div class="name" v-text="eleclicen.licenseName"></div>
					    	<div class="time" v-text="'有效期：'+eleclicen.validityDate"></div>
					    </li>	
					</template>
				</ul>
			</div>
			<!--自制材料-->
			<div class="doc" style="display: none;">
				<div class="info">共<span v-text="netUserLicenses.length"></span>个文件</div>
				<!--如果没有内容-->
				<div class="wenj" v-if="noNetUserLicense">自制材料为空</div>
				<ul class="mui-table-view" v-else>
					<template v-for="netUserLicense in netUserLicenses">
						<li v-on:click="chooThis($event,2,netUserLicense.oid,netUserLicense.licenseName)" :userLicenseId="netUserLicense.oid" class="mui-table-view-cell">
					    	<img src="../../../images/work/thumbnail_pic04.png" alt="" />
					    	<div class="name" v-text="netUserLicense.licenseName"></div>
					    	<div class="time" v-text="'上传时间：'+ netUserLicense.uploadDate"></div>
					    	<template style="display: none;" v-for=" lisAtta in  netUserLicense.atta">
					    		<span class="lisAtta" :id="lisAtta.oid" :name="lisAtta.originName" ></span>
					    	</template>
						</li>						
					</template>
				</ul>
			</div>
			<div class="del_box">
				<div class="title"><span>已选材料</span><span v-on:click="deleteAll">清空全部</span></div>
				<ul class="mui-table-view" style="">
					<template v-for="selectedFile in selectedFiles">
					    <li  class="mui-table-view-cell"  :id="selectedFile.id" :type="selectedFile.type" :name="selectedFile.name">
					    	<span>【{{selectedFile.typeInfo}}】{{selectedFile.name}}</span>
					    	<span class="delete" v-on:click="deleteThis"></span>
					    </li>
				    </template>
				</ul>
			</div>
			<!--确认提交模块-->
			<div class="sure">
				<div class="info_num" v-text="'已选中' + selectedNum + '个'"></div>
				<button id="sub" class="mui-btn sure-btn">确认提交</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var my_immersed = function(immersed) {
			document.getElementById("header").style.paddingTop = immersed + 'px';
			document.getElementById("header").style.height = (immersed + 44)+'px';
			document.getElementById("content").style.marginTop = (immersed + 44) + 'px';
		}
	</script>
	<script type="text/javascript" src="../../../js/immersed.js" ></script>
	<script type="text/javascript"  src="../../../js/mui.min.js"></script>
	<script type="text/javascript"  src="../../../js/common.js"></script>
	<script type="text/javascript" src="../../../js/app.js" ></script>
	<script type="text/javascript" src="../../../js/jquery2.2.4.min.js"></script>
	<script type="text/javascript" src="../../../js/vue.min.js" ></script>
	<script>
		(function(mui,$){ 
			mui.init();
			var index,beforeViewId;
			mui.plusReady(function(){
				plus.webview.currentWebview().show();
				beforeViewId = plus.webview.currentWebview().beforeViewId;
				index = plus.webview.currentWebview().index;
				getLibrary();
				//提交材料
				document.getElementById("sub").addEventListener('tap',function(e){
					e.stopPropagation();
					var librarys = [];
					$(".del_box").find(".mui-table-view-cell").each(function(){
						var type = $(this).attr('type');
						if(type == 1){//证照库
							librarys.push({
								licenseNumber:this.id,
								fileOriginalName: "证照-" + $(this).attr('name'),
							})
						}else{//自制材料
							var trueId = this.id;
							$('li[userLicenseId="'+this.id+'"]').find('.lisAtta').each(function(j,span){
								librarys.push({
									selfLicenseId: span.id,
									trueId:trueId,
									fileOriginalName:"自制材料-" + $(span).attr('name'),
								})
							});
						}
					})
					if(librarys.length < 1){
						mui.alert('还未选择任何材料 ! ',null,null,null,'div');
					}
					beforeView = plus.webview.getWebviewById(beforeViewId);
					if(beforeView){
						mui.fire(beforeView,'selectedFromLibrary',{index:index,librarys:librarys})
					}
					mui.back();
				})
			})
			
			//材料vue
			var img_vm = new Vue({
				el:"#content",
				data:{
					host:utils.HOST,
					noEleclicen:false,
					eleclicenList:[],
					noNetUserLicense:false,
					netUserLicenses:[],
					selectedNum:0,
					selectedFiles:[]
				},
				methods:{//选择材料
					chooThis:function(event,type,id,name){
						var info = {
							type:type,
							typeInfo:type == 1 ? "证照库" : "自制文件",
							id:id,
							name:name
						}
						//控制选择框
						var li = event.currentTarget;
						if($(li).hasClass('li_active')){
							$(li).removeClass('li_active');
						}else{
							if(type == 1){// 证照库 只能选择一个 ,在页面上 取消其他选择
								$(li).siblings().removeClass('li_active');
							}
							$(li).addClass('li_active');
						}
						var array = new Array();
						
						if(this.selectedFiles){//点击添加或去除
							var seleceted = this.selectedFiles;
							if(type == 1){
								for(var i= 0 ;i < seleceted.length ; i++){
									if(seleceted[i].type != 1){
										array.push(seleceted[i]);
									}
								}
								array.push(info);
							}else{
								for(var i= 0 ;i < seleceted.length ; i++){
									if(seleceted[i].id != info.id){
										array.push(seleceted[i]);
									}
								}
								if(seleceted.length == array.length){
									array.push(info);
								}
							}
						}else{
							array.push(info);
						}
						
						this.selectedNum = array.length;
						this.selectedFiles = array;
					},
					deleteThis:function(){//删除材料
						var vm  = this;
						var li = event.currentTarget;
						vm.selectedNum = 0;
						$(li).parent().remove();
					},
					deleteAll:function(){
						var vm  = this;
						if(vm.selectedNum == 0){
							//showOrHiddenMask();
							return;
						}
						mui.confirm('确认清空已选材料么?','提示',['取消','确认'],function(e){
							if(e.index == 1){
								vm.selectedNum = 0;
								vm.selectedFiles = [];
								showOrHiddenMask();
							}
						},'div')
					}
				}
			})
			//获取材料
			var getLibrary = function(){
				var url = "appNetCase/initLibrary.do";
				utils.ajax(url,function(data){
					data = JSON.parse(data);
					if(data.state == 1){
						img_vm.noEleclicen = data.noEleclicen;
						img_vm.eleclicenList = data.eleclicenList;
						img_vm.noNetUserLicense = data.noNetUserLicense;
						img_vm.netUserLicenses = data.netUserLicenses;
					}else{
						
					}
				},jsonToParams({userId:getUserId()}),{showWait:true})
			}
			//标题点击事件
			$('.titles').each(function(){
				$(this).on('click',function(){
					$(this).addClass('title_active').siblings().removeClass('title_active');
					$('.imgs').toggle();
					$('.doc').toggle();
				})
			})
			//显示遮罩层
			document.getElementsByClassName('sure')[0].addEventListener('tap',function(){
				showOrHiddenMask();
			})
			var mask;
			var showOrHiddenMask = function(){
				if(!mask){
					mask = mui.createMask(function(){
						$('.del_box').hide();
					});
					$('.del_box').show();
					mask.show();
				}else{
					mask.close();
					$('.del_box').hide();
					mask = null;
				}
			}
		}(mui,jQuery))
	</script>
</html>